<template>
	<div class="relevantWra">
		<div class="cardContainer">
			<div class="card">
				<div class="goods" v-if="advList">
					<p class="title">相关商品服务</p>
					<div
						class="videoCardContainer"
						v-for="item in advList.content"
						:key="item.id"
					>
						<el-card :body-style="{ padding: '0px' }">
							<img :src="item.cover" class="image" />
							<div class="cardMiddle">
								<a href="#">{{ item.title }}</a>
							</div>
							<div class="userInfo">
								<div class="left">
									<p>
										￥<span>{{ item.commodityBackup.price }}</span>
									</p>
								</div>
								<div class="right">
									<el-button color="#fe785d" round style="color: white">
										{{ item.operation.name }}
									</el-button>
								</div>
							</div>
						</el-card>
					</div>
				</div>
				<div class="relevant">
					<p class="title">Ta的相关</p>
					<div
						class="videoCardContainer"
						v-for="item in videoCover.content"
						:key="item.id"
					>
						<el-card :body-style="{ padding: '0px' }">
							<img :src="item.cover" class="image" />
							<div class="cardMiddle">
								<a href="#">{{ item.planName }}</a>
							</div>
							<div class="userInfo">
								<div class="left">
									<p>
										{{ item.contentCount }}个内容·{{
											item.planAddCount
										}}人已加入
									</p>
								</div>
							</div>
						</el-card>
					</div>
				</div>
				<div class="relevant">
					<p class="title">更多推荐</p>
					<div
						class="videoCardContainer"
						v-for="item in videoCover.content"
						:key="item.id"
					>
						<el-card :body-style="{ padding: '0px' }">
							<img :src="item.cover" class="image" />
							<div class="cardMiddle">
								<a href="#">{{ item.planName }}</a>
							</div>
							<div class="userInfo">
								<div class="left">
									<p>
										{{ item.contentCount }}个内容·{{
											item.planAddCount
										}}人已加入
									</p>
								</div>
							</div>
						</el-card>
					</div>
				</div>
			</div>
			<div class="card" v-if="videoCover">
				<div class="practice">
					<p class="title">相关练习室</p>
					<div v-for="item in videoCover.content" :key="item.id">
						<img :src="item.cover" class="image" />
						<div class="info">
							<p>{{ item.planName }}</p>
							<p>
								{{ item.contentCount }}个内容·{{ item.planAddCount }}人已加入
							</p>
							<el-button round color="#f93684" plain>加入</el-button>
						</div>
						<div></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import router from "../../../router"
import { reqAdv, reqVideoCover } from "../../../api/player/player"

let advList = ref<any>([])
let videoCover = ref<any>([])

onMounted(() => {
	getAdv()
	getVideoCover()
})
const videoId = router.currentRoute.value.query.id

//获取广告信息
const getAdv = async () => {
	let result = await reqAdv(videoId)
	advList.value = result
}

//练习室信息
const getVideoCover = async () => {
	let result = await reqVideoCover(videoId)
	videoCover.value = result
}
</script>

<style scoped>
.relevantWra {
	background-color: #eee;
}

.cardContainer {
	width: 100%;
	display: inline-block;
}

.card {
	width: 1200px;
	background-color: white;
	margin: 0 auto;
	margin-top: 20px;
	padding-left: 90px;
	box-sizing: border-box;
}

.title {
	padding-top: 20px;
	padding-bottom: 20px;
	font-size: 24px;
	color: #333;
}

.videoCardContainer {
	display: inline-block;
	margin-right: 20px;
	width: 234px;
	height: 280px;
	font-size: 14px;
	background-color: white;
	border-radius: 5px;
}

.cardMiddle {
	padding: 10px 0 10px 13px;
	height: 50px;
	box-sizing: border-box;
}
.practice {
	display: block;
}
.cardMiddle .cardFlag {
	font-size: 12px;
	border: 1px solid black;
	border-radius: 4px;
	box-sizing: border-box;
	margin-right: 4px;
	display: inline-block;
	width: 26px;
	height: 16px;
	text-align: center;
	line-height: 16px;
}

.cardNum {
	display: block;
	font-size: 12px;
	line-height: 32px;
	color: #b1b5c1;
}

.iconInfo span {
	font-size: 12px;
	margin-right: 6px;
}

.iconInfo span svg {
	vertical-align: bottom;
}

.userInfo {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	padding: 0 16px;
	box-sizing: border-box;
}

.userInfo .left img {
	width: 24px;
	height: 24px;
	vertical-align: middle;
	margin-right: 5px;
	border-radius: 50%;
}

.image {
	width: 240px;
	height: 134px;
	display: block;
}
.info {
	margin-left: 260px;
	width: 240px;
	height: 134px;
	padding-top: 30px;
	margin-top: -160px;
}
.info p:first-child {
	font-size: 16px;
	color: #111;
	padding-bottom: 30px;
}
.info p:nth-child(2) {
	font-size: 14px;
	color: #7d808f;
	height: 40px;
}
</style>
